import {
    SafeAreaView,
    StyleSheet,
    Animated,
    SectionList,
    Text,
    View,
    Image,
    StatusBar,
    Button,
} from 'react-native';
import React, {useRef, useState} from 'react'
import * as ImagePicker from "expo-image-picker";
import TakeItem from "../../components/TakeItem";
import favicon from '../../assets/favicon.png'
export default function DataDay({navigation}) {
    const [image, setImage] = useState(null);

    const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchCameraAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            aspect: [1,1],
        });

        console.log(result);

        if (!result.canceled) {
            setImage(result.assets[0].uri);
        }
    };

    return (
        <View style={styles.container}>
            <SectionList
                sections={DATA}
                keyExtractor={(item, index) => item + index}
                renderItem={({item}) => (
                    <View style={styles.item}>
                        <Image style={styles.img} source={favicon}/>
                        <Text style={styles.text} onPress={()=>navigation.navigate('Take')}>1{item}</Text>
                    </View>
                )}
                renderSectionHeader={({section}) => (
                    <Text style={styles.timeTitle}>{section.title}</Text>
                )}

            />

            <View style={styles.TakeItem}>
                {image? <TakeItem image={image} />:''}

            </View>

            <View style={styles.box}>
                {image?  <Button onPress={()=>setImage(null)} title={"保存"} />:  <Button onPress={pickImage} title={"采集"} />}
            </View>
        </View>


    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        position:"relative"
    },
    box: {
        position:'absolute',
            bottom:"15%",
            right:'5%',
        width: 60
    },
    image: {
        width: 200,
        height: 200,
    },
    rowTitle:{
        color:'#555555',
        fontSize:13,
        fontWeight:"bold"
    },
    timeTitle:{
        marginTop:5,
        color:'#1C90D1',
        fontSize:11,
        textAlign:"center",
        fontWeight:"bold",
    },
    item:{
        flex:1,
        display:"flex",
        flexDirection:"row",
        alignItems:"center",
        padding:5,
        marginLeft:10,
        marginBottom:5,
        borderBottomWidth:0.5,
        borderBottomColor:"#CFCFCF",
    },
    text:{
        flex:1,
        fontSize:14,
        color:"#3B3B3B",
        fontWeight:'400',
    },
    img:{
      backgroundColor:"#E7E1DF",
      width:30,
      height:30,
        marginRight:10
    },

    TakeItem:{
        flex:1,
        width:"93%",
        height:100,
        position:'absolute',
        bottom:"21%",
        right:'4%'
    }
});

const DATA = [
    {
        title: '类目1',
        data: ['数据12', '数据2', '数据3'],
    },
    {
        title: '类目2',
        data: ['数据4', '数据5', '数据6','数据1', '数据2', '数据3'],
    },
    {
        title: '类目3',
        data: ['数据1', '数据2', '数据3'],
    },
    {
        title: '类目4',
        data: ['数据1', '数据2', '数据3'],
    },
    {
        title: '类目3',
        data: ['数据1', '数据2', '数据3'],
    },
    {
        title: '类目4',
        data: ['数据1', '数据2', '数据3'],
    }
];